<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <title>{$eyou.field.seo_title}</title>
  <meta name="description" content="{$eyou.field.seo_description}" />
  <meta name="keywords" content="{$eyou.field.seo_keywords}" />
  <link href="{eyou:global name='web_ico' /}" rel="shortcut icon" type="image/x-icon" /> <link href="{eyou:global name='web_cmspath' /}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  {eyou:static file="skin_pc/css/style.css" /}
  {eyou:static file="skin_pc/css/guestbook.css" /}
  {eyou:static file="__PUBLIC__/static/photo/js/jquery-1.11.0.min.js" /}
</head>
<style>
  .video-container {
    width: 100%; /* 或者具体宽度 */
    position: relative;
    overflow: hidden; /* 防止内容溢出 */
  }

  .video-container video {
    width: 100%; /* 宽度100% */
    object-fit: cover; /* 视频覆盖整个容器，可能会裁剪视频 */
  }
  .text-button{
    font-size:12px; background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */border: 1px solid white; /* 边框颜色 */ padding-left: 5%;padding-right: 5%;
    padding-bottom: 1%;padding-top: 1%;border-radius: 15px;
  }
  .video-container {
    position: relative;

  }
  .play-button {
    font-size:12px;
    background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */
    border: 1px solid white; /* 边框颜色 */
    padding-left: 5%;padding-right: 5%;
    padding-bottom: 1%;padding-top: 1%;
    position: absolute;
    top: 20%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 调整按钮位置 */
    cursor: pointer; /* 鼠标悬停样式 */
    border-radius: 15px;
  }
  .play-button-video {
    font-size:12px;
    background-color: rgba(255, 255, 255, 0); /* 白色背景透明 */
    border: 1px solid white; /* 边框颜色 */
    padding-left: 5%;padding-right: 5%;
    padding-bottom: 1%;padding-top: 1%;
    position: absolute;
    top: 80%; /* 垂直居中 */
    left: 50%; /* 水平居中 */
    transform: translate(-50%, -50%); /* 调整按钮位置 */
    cursor: pointer; /* 鼠标悬停样式 */
    border-radius: 15px;
  }
  .text-white {
    color: #fff;
  }
  .channel-banner {height:350px;position:relative;background-repeat:no-repeat;background-position:center center;background-size:cover;margin:0;padding:0;}
  .channel-banner .banner-info {position:absolute;top:50%;margin-top:-50px;left:0;right:0;z-index:3}
  .channel-banner .banner-info h3{font-size:40px;font-weight:600;position:relative;margin-bottom:30px}
  .channel-banner .banner-info h3:before {left:50%;margin-left:-15px;bottom:-10px;width:30px;height:3px;background:#ff9600;content:'';display:block;position:absolute;}
  .channel-banner .banner-info p{font-size:36px;}
</style>
<body>
<div class="container">{eyou:include file="header_pc.htm" /}
  <span class="nav_wrap" style="display: none"></span>
  <div class="web_index" style="padding:0px">
    {eyou:adv pid='5'}
    <div class="video-container">
      <video id="myVideo1" src='{$field.litpic}' width="100%" height="900" controls  autoplay muted disablepictureinpicture loop> </video>
    </div>
    {/eyou:adv}
    {eyou:modelsartlist typeid='1'}

    <div class="index_project channel-banner"   style="background-image: url({eyou:field name='litpic' /});">


      <div class="banner-info" style="margin-top: 0">
        <div class="container text-center">
          <button onclick="location.href='{$eyou.global.web_basehost}/index.php?m=home&c=Lists&a=index&tid=1'" class="text-white play-button" style="">{eyou:field name='typename' /}</button>
        </div>
      </div>
    </div>
    {/eyou:modelsartlist}

    {eyou:adv pid='6'}
    {eyou:modelsartlist typeid='3'}
    <div class="video-container">
      <video id="myVideo2" src='{$field.litpic}' width="100%" height="350" controls  autoplay muted loop disablepictureinpicture></video>
      <button onclick="location.href='{$eyou.global.web_basehost}/index.php?m=home&c=Lists&a=index&tid=3'" class="text-white play-button-video">{eyou:field name='typename' /}</button>
    </div>
    {/eyou:modelsartlist}
    {/eyou:adv}

    {eyou:modelsartlist typeid='12'}

    <div class="index_project channel-banner"   style="background-image: url({eyou:field name='litpic' /});">


      <div class="banner-info" style="margin-top: 0">
        <div class="container text-center">
          <button onclick="location.href='{$eyou.global.web_basehost}/index.php?m=home&c=Lists&a=index&tid=12'" class="text-white play-button" style="">{eyou:field name='typename' /}</button>
        </div>
      </div>
    </div>
    {/eyou:modelsartlist}

    {eyou:modelsartlist typeid='5'}

    <div class="index_project channel-banner"   style="margin-bottom:15%;background-image: url({eyou:field name='litpic' /});">


      <div class="banner-info" style="margin-top: 0;margin-bottom: 15%">
        <div class="container text-center">
          <button onclick="location.href='{$eyou.global.web_basehost}/index.php?m=home&c=Lists&a=index&tid=5'" class="text-white play-button" style="">{eyou:field name='typename' /}</button>
        </div>
      </div>
    </div>
    {/eyou:modelsartlist}
    </div>
  <div style="height:1px"></div>
</div>
<script>
  // var video1 = document.getElementById("myVideo1");
  // video1.addEventListener("touchstart", playVideo1);
  // function playVideo1() {
  //   video1.play();
  // }
  // video1.addEventListener('webkitfullscreenchange', function() {
  //   if (!document.webkitIsFullScreen) {
  //     // 如果不是全屏，则退出全屏
  //     document.webkitExitFullscreen();
  //   }
  // }, false);
  // video1.addEventListener('mozfullscreenchange', function() {
  //   if (!document.mozFullScreen) {
  //     document.mozCancelFullScreen();
  //   }
  // }, false);
  // video1.addEventListener('fullscreenchange', function() {
  //   if (!document.fullscreen) {
  //     if (document.exitFullscreen) {
  //       document.exitFullscreen();
  //     }
  //   }
  // }, false);
  //
  // var video2 = document.getElementById("myVideo2");
  // video2.addEventListener("touchstart", playVideo2);
  // function playVideo2() {
  //   video2.play();
  // }
  //
  // video2.addEventListener('webkitfullscreenchange', function() {
  //   if (!document.webkitIsFullScreen) {
  //     // 如果不是全屏，则退出全屏
  //     document.webkitExitFullscreen();
  //   }
  // }, false);
  // video2.addEventListener('mozfullscreenchange', function() {
  //   if (!document.mozFullScreen) {
  //     document.mozCancelFullScreen();
  //   }
  // }, false);
  // video2.addEventListener('fullscreenchange', function() {
  //   if (!document.fullscreen) {
  //     if (document.exitFullscreen) {
  //       document.exitFullscreen();
  //     }
  //   }
  // }, false);
</script>

{eyou:include file="footer_pc.htm" /}


</body>
</html>